<template>
     <div class="wrapper">
         <swiper :options="swiperOption" v-if="showSwiper">
            <swiper-slide v-for="item of swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div> -->
            <!-- <div class="swiper-scrollbar"   slot="http://img1.qunarzz.com/piao/fusion/1806/8b/2680212fadf30002.jpg_750x200_f85409ac.jpgscrollbar"></div> -->
        </swiper>
     </div>
</template>
<script>
export default {
    name:'HomeSwiper',
    props:{
        swiperList:Array
    },
    data () {
        return {
            swiperOption: {
                pagination:'.swiper-pagination',// 小白点
                loop:true,
                speed:300,// 触动后运行时间
                autoplay:1500,// 自动播放时间间隔
                autoplayDisableOnInteraction:false,//当设置为false时，用户操作之后autoplay不会被禁掉
            },
            // swiperList: [{
            //     id:'001',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/e5/59fad13a64807d02.jpg_750x200_713ae984.jpg'
            // },{
            //     id:'002',
            //     imgUrl:'https://imgs.qunarzz.com/piao/fusion/1806/84/40d3771fae6eaf02.jpg_750x200_30862134.jpg'
            // },{
            //     id:'003',
            //     imgUrl:'https://imgs.qunarzz.com/piao/fusion/1805/d2/2a72bb766d8f6d02.jpg_750x200_e1c78528.jpg'
            // }]
        }
    },
    computed:{
        // 解决swiper传入[] 时创建 导致的粗次加载swiper 不是第一张
       showSwiper () {
           return this.swiperList.length
       } 
    }
}
</script>
<style scoped lang="stylus">
//穿透
.wrapper >>> .swiper-pagination-bullet-active
    background:#fff !important

.wrapper
    // 网速慢的情况先 图片未加载完成 先占位置 消除加载时下面内容抢占图片位置造成的抖动
    // 标准写法
    overflow:hidden
    width: 100%
    height: 0 
    //padding-bottom:26.7%
    padding-bottom:31.25%
    background: #eee
    //或 某些浏览器兼容问题
    // width:100%
    // height:26.7vw
    .swiper-img
        width: 100%
</style>
